<template>
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警研判</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <MapContent mapType="yjyp" />
      </div>
      <div class="Emergency-tb">
        <div class="Emergency-tb-bd">
          <el-select v-model="eventCode" placeholder="请选择" style="width:100%" @change="changes">
            <el-option v-for="item in yjsj_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="Emergency-tb-bt">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">预警信息</div>
          </div>
          <div class="tabs_row_content">
            <div class="tabs_row_content_tob">
              <div class="grid-content bg-purple">险情类别：{{ list.dangerName }}</div>
              <div class="grid-content bg-purple">预警级别：{{ list.warningLvName }}</div>
              <div class="grid-content bg-purple">影响范围：{{ rangeDetailVos }}</div>
              <!-- <div class="grid-content bg-purple">影响时间：{{list.effectStartTime}}至{{list.effectEndTime}}</div> -->
            </div>
            <div class="sjgy_name">
              <div class="name">影响时间：</div>
              <div class="names">{{ list.effectStartTime }}至{{ list.effectEndTime }}</div>
            </div>
            <div class="sjgy_name">
              <div class="name">事件概要：</div>
              <div class="names">{{ list.incidentOutline }}</div>
            </div>
          </div>
        </div>
        <div class="Emergency-tb-bts">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">预计受影响的设备及用户</div>
            <div class="Emergency-tb-bt-bottom" @click="showMoreDialog">更多<i class="el-icon-d-arrow-right"
                color="#fff"></i></div>
          </div>
          <LsdTable slot="gjxm" :compRef="tableInformation.compRef" :columns="tableInformation.columns"
            :tableData="tableInformation.tableData" :tableAttr="tableInformation.tableAttr"
            :isShowPage="tableInformation.isShowPage" :isSelectFlag="tableInformation.isSelectFlag"
            :isSequenceFlag="tableInformation.isSequenceFlag" />
        </div>
      </div>
      <div class="Emergency-tb-zzt">
        <div class="Emergency-tb-bt-titel">
          <div class="Emergency-tb-bt-top">研判标准</div>
          <div class="Emergency-tb-bt-center">
            <el-select v-model="value" placeholder="请选择" size="mini" @change="change">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="Emergency-tb-bt-ypbz">
          <div class="Emergency-tb-bt-ypbzs">
            <div class="Emergency-tb-bt-ypbzhs">红色</div>
            <LsdTable slot="gjxm" :compRef="tableRed.compRef" ref="gjxm" :isSequenceFlag="tableRed.isSequenceFlag"
              :columns="tableRed.columns" :tableData="tableRed.tableData" :tableAttr="tableRed.tableAttr"
              :isShowPage="tableRed.isShowPage" />
          </div>
          <div class="Emergency-tb-bt-ypbzs">
            <div class="Emergency-tb-bt-ypbzcs">橙色</div>
            <LsdTable slot="gjxm" :compRef="tableOrange.compRef" ref="gjxm" :isSequenceFlag="tableOrange.isSequenceFlag"
              :columns="tableOrange.columns" :tableData="tableOrange.tableData" :tableAttr="tableOrange.tableAttr"
              :isShowPage="tableOrange.isShowPage" />
          </div>
          <div class="Emergency-tb-bt-ypbzs">
            <div class="Emergency-tb-bt-ypbzhss">黄色</div>
            <LsdTable slot="gjxm" :compRef="tableYellow.compRef" ref="gjxm" :isSequenceFlag="tableYellow.isSequenceFlag"
              :columns="tableYellow.columns" :tableData="tableYellow.tableData" :tableAttr="tableYellow.tableAttr"
              :isShowPage="tableYellow.isShowPage" />
          </div>
          <div class="Emergency-tb-bt-ypbzs">
            <div class="Emergency-tb-bt-ypbzls">蓝色</div>
            <LsdTable slot="gjxm" :compRef="table.compRef" ref="gjxm" :isSequenceFlag="table.isSequenceFlag"
              :columns="table.columns" :tableData="table.tableData" :tableAttr="table.tableAttr"
              :isShowPage="table.isShowPage" />
          </div>
        </div>
        <!-- 列表表格 -->
      </div>
    </div>
    <LsdDialog :dialogConfig="dialogConfig" @close="close">
      <!-- 接入gis数据 -->
      <div class="box" slot="dialog">
        <el-table :data="sbinfoData" style="width: 100%" :header-cell-style="header_cell_style" border
          :cell-style="{ fontSize: '16px' }" class="banci-table" :height="mainTableHeight">
          <el-table-column fixed align="center" label="序号" type="index" width="100"></el-table-column>
          <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="(item, i) of tableColumns" :key="i"
            show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </LsdDialog>
    <LsdDialog :dialogConfig="dialogConfig1" @close="close1">
      <div slot="dialog" class="homePageCard" id="homePageCard">
        <!-- <div class="full-box">
        <span @click="exitFullscreen">退出</span>
      </div> -->
        <div id="maps" style="width: 100%; height: 100%"></div>
      </div>
    </LsdDialog>

  </div>
</template>
<script>
import { getJudgeStandard, effectFacilityListPage, getCircuitDetailData, listPage, getAlreadyIssue } from "@/api/EarlyWarningManagement/yjyp.js";
import { getIssueJudgeData } from "@/api/EarlyWarningManagement/yjtzd";
import { tableRed, tableOrange, tableYellow } from "./components/config";
// import MapContent from "./components/mapContent.vue";
import MapContent from "../EWInformation/components/mapContent.vue";
import { getDictByGroup } from "@/api/common.js";
import { getTongyong, getGisToken } from "@/api/gisMap";
import { cityArr } from "@/config/geoCode";
export default {
  name: "Emergency",
  components: { MapContent },
  data() {
    return {
      zb110kW: [],
      xl110kW: [],
      xl35kW: [],
      sbinfoData: [],
      header_cell_style: {
        textAlign: "center",
        backgroundColor: "#B1C8F9",
        border: "1px solid #ccc",
        fontSize: "16px",
        color: "#333"
      },
      AffectedUsers: {
        isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        loading: false,
        actions: [
          {
            id: "dialogVisible",
            text: "关联地图",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "facilityName",
            label: "设备名称",
            align: "center"
            // "min-width": "230px"
          },
          {
            prop: "facilityTypeName",
            label: "设备类型",
            align: "center"
            // "min-width": "230px"
          },
          {
            prop: "unitName",
            label: "所属单位",
            align: "center"
          },
          {
            prop: "voltageClasses",
            label: "电压等级",
            align: "center"
            // "min-width": "230px"
          },
          {
            prop: "operationUnitName",
            label: "运维单位",
            align: "center"
            // "min-width": "230px"
          },
          {
            prop: "operationGroupName",
            label: "运维班组",
            align: "center"
          },
          {
            prop: "facilityState",
            label: "设备状态",
            align: "center"
            // "min-width": "230px"
          },
          {
            prop: "revolveDate",
            label: "投运日期",
            align: "center"
          },
          {
            prop: "property",
            label: "资产性质",
            align: "center",
            "min-width": "140px"
          }
        ],
        tableAttr: {
          "max-height": "460px",
          height: "460px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        },
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      tableRed: tableRed, // 红色标准
      tableOrange: tableOrange, // 橙色标准
      tableYellow: tableYellow, // 黄色标准
      // 蓝色研判标准
      table: {
        compRef: "gjxm",
        isShowPage: false, // 是否展示分页
        isSequenceFlag: true, // 是否展示序号
        loading: false,
        tableData: [],
        columns: [
          {
            prop: "startCondition",
            label: "启动条件",
            align: "left"
            // "min-width": "230px"
          }
        ],
        tableAttr: {
          "max-height": "200px",
          height: "200px",
          border: true,
          fit: true,
          stripe: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px",
            "color": "#fff",
            "border": "none"
          },
          "row-style": {
            "background": "#18283a"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "transparent",
            "font-size": "16px",
            "border": "none",
            "color": "#fff"
          }
        }
      },
      tableInformation: {
        isSelectFlag: false,
        compRef: "gjxm",
        isSequenceFlag: false,
        resetFlag: true,
        loading: false,
        tableData: [],
        columns: [
          {
            prop: "unitName",
            label: "所属单位",
            align: "center",
            "min-width": "150px"
          },
          {
            prop: "zb110kW",
            label: "主网设备",
            align: "center",
            children: [
              {
                prop: "zb110kW",
                label: "110kV主变",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.detailList(row, "zb110kW");
                              }
                            }
                          }}
                        >
                          {row.zb110kW}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "xl110kW",
                label: "110kV线路",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.detailList(row, "xl110kW");
                              }
                            }
                          }}
                        >
                          {row.xl110kW}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "xl35kW",
                label: "35kV线路",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.detailList(row, "xl35kW");
                              }
                            }
                          }}
                        >
                          {row.xl35kW}
                        </span>
                      }
                    </div>
                  );
                }
              }
            ]
          },
          {
            // prop: "xl10kW",
            label: "配电设备",
            align: "center",
            prop: "zw",
            children: [
              {
                prop: "xl10kW",
                label: "10kV线路",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.detailList(row, "xl10kW");
                              }
                            }
                          }}
                        >
                          {row.xl10kW}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "tb",
                label: "台变",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.detailList(row, "tb");
                              }
                            }
                          }}
                        >
                          {row.tb}
                        </span>
                      }
                    </div>
                  );
                }
              }
            ]
          },
          {
            // prop: "tq",
            label: "用户及台区",
            align: "center",
            children: [
              {
                prop: "yh",
                label: "用户",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.detailList(row, "yh");
                              }
                            }
                          }}
                        >
                          {row.yh}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "tq",
                label: "台区",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.detailList(row, "tq");
                              }
                            }
                          }}
                        >
                          {row.tq}
                        </span>
                      }
                    </div>
                  );
                }
              }
            ]
          }
        ],
        tableAttr: {
          "max-height": "210px",
          height: "210px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px",
            "color": "#fff",
            border: "1px solid rgba(20,65,119)"
          },
          "row-style": {
            "background": "#18283a"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "transparent",
            "font-size": "16px",
            border: "1px solid rgba(20,65,119)",
            "color": "#fff"
          }
        }
      },
      options: [],
      value: "",
      option: [],
      values: "",
      // 筛选信息
      formData: [
        {
          elType: "input",
          id: "judgeName",
          label: "设备名称",
          attrs: {
            value: "",
            size: "small"
          }
        },
        {
          elType: "select",
          id: "dangerCode",
          label: "设备类型",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "warningLvCode",
          label: "所属单位",
          attrs: {
            value: "",
            // clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "warningLvCode",
          label: "电压等级",
          attrs: {
            value: "",
            // clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "isWarning",
          label: "运维单位",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: [

          ]
        },
        {
          elType: "select",
          id: "receiveTimes",
          label: "运维班组",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "judgeState",
          label: "设备状态",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: [
            { label: "编辑中", value: "0" },
            { label: "待审批", value: "1" },
            { label: "已审批", value: "2" },
            { label: "驳回", value: "3" }
          ]
        },
        {
          elType: "dateTimePicker",
          id: "judgeTime",
          label: "投运日期",
          attrs: {
            value: "",
            size: "small",
            type: "datetime",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      form: {},
      // 弹窗信息
      dialogConfig: {
        title: "预计受影响设备",
        isShow: false, // 弹窗显示隐藏
        btnList: [],
        width: "70%"
      },
      tableColumns: [
        {
          prop: "sbmc",
          label: "设备名称"
        },
        {
          prop: "dydj",
          label: "电压等级"
        },
        {
          prop: "sbzlx",
          label: "设备类型"
        },
        {
          prop: "ssds",
          label: "所属地市"
        },
        {
          prop: "yxdw",
          label: "运行单位"
        }
      ],
      dialogConfig1: {
        title: "关联地图",
        isShow: false, // 弹窗显示隐藏
        btnList: [],
        width: "95%"
      },
      list: {},
      eventCode: "",
      eventTypeCode: "",
      yjsj_options: [], // 应急是事件options，
      pageNum: 1,
      pageSize: 10,
      dangerCode: "",
      mapData: [],
      rangeDetailVos: ""
    };
  },
  computed: {
    mainTableHeight() {
      return (window.innerHeight * 0.85 - 180) + "px";
    }
  },
  created() {
    // this.init();
    this.Dictionaries();
    // this.mapHanble();
    this.GetAlertInformation();
    // this.getCircuitDetailData();
  },
  methods: {
    async mapHanble() {
      const res = await getAlreadyIssue();
      this.mapData = res;
    },
    // 弹窗按钮点击事件 对应id绑定事件
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 更多设备
    async effectFacilityListPage() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      const res = await effectFacilityListPage(parmas);
      this.AffectedUsers.tableData = res.data;
      this.AffectedUsers.paginationAtrrs.total = res.total;
    },
    getCircuitDetailData() {
      getCircuitDetailData().then(res => {
        this.tableInformation.tableData = res;
      });
    },
    change(val) {
      getJudgeStandard({
        dangerCode: val
      }).then(res => {
        const ass = [];
        res.forEach((i, index) => {
          i.startCondition = i.startCondition.substring(3);
          if (
            i.warningLvName !== "黄色" &&
            i.warningLvName !== "橙色" &&
            i.warningLvName !== "红色"
          ) {
            ass.push(i);
          }
        });
        this.table.tableData = ass;
        const arr = [];
        res.forEach((i, index) => {
          // i.startCondition = i.startCondition.substring(3)
          if (
            i.warningLvName !== "红色" &&
            i.warningLvName !== "橙色" &&
            i.warningLvName !== "蓝色"
          ) {
            arr.push(i);
          }
        });
        this.tableYellow.tableData = arr;
        const add = [];
        res.forEach((i, index) => {
          // i.startCondition = i.startCondition.substring(3)
          if (
            i.warningLvName !== "黄色" &&
            i.warningLvName !== "橙色" &&
            i.warningLvName !== "蓝色"
          ) {
            add.push(i);
          }
        });
        this.tableRed.tableData = add;
        const ayy = [];
        res.forEach((i, index) => {
          // i.startCondition = i.startCondition.substring(3)
          if (
            i.warningLvName !== "黄色" &&
            i.warningLvName !== "红色" &&
            i.warningLvName !== "蓝色"
          ) {
            ayy.push(i);
          }
        });
        this.tableOrange.tableData = ayy;
      });
    },
    goList() {
      this.dialogConfig.isShow = true;
      this.effectFacilityListPage();
    },
    close() { this.dialogConfig.isShow = false; },
    Dictionaries() {
      getDictByGroup({ groupCode: "dic_xqlb" }).then(res => {
        const option = res.map((item) => {
          return {
            label: item.dicName,
            value: Number(item.dicCode)
          };
        });
        this.options = option;
        this.change(res[0].dicCode);
      });
    },
    // 获取预警信息下拉的数据
    GetAlertInformation() {
      listPage({
        pageNum: 1,
        pageSize: 10,
        judgeState: "2"
      }).then(res => {
        const option = res.data.map((item) => {
          return {
            label: item.judgeName,
            value: item.id
          };
        });

        this.yjsj_options = option;
        this.eventCode = res.data[0].id;
        this.eventTypeCode = Number(res.data[0].eventCode);
        this.changes(res.data[0].id);
      });

    },
    getYjtzdCity(effectRange) {
      const arr = effectRange.split("、").filter(el => el.includes("县") || el.includes("市") || el.includes("区"));
      const newEffList = [];
      arr.forEach(el => {
        if (el.startsWith("湖北省") && (!el.endsWith("省"))) {
          newEffList.push(el.split("省")[1]);
        } else {
          newEffList.push(el);
        }
      });
      const list = [];
      newEffList.forEach(el => {
        if (el.endsWith("县") || el.endsWith("区")) {
          if (el.includes("市")) {
            list.push(el.split("市")[1]);
          } else {
            list.push(el);
          }
        } else if (el.endsWith("市")) {
          if (el.includes("自治州")) {
            list.push(el.split("自治州")[1]);
          } else {
            const index1 = el.indexOf("市");
            const index2 = el.lastIndexOf("市");
            if (index1 === index2) {
              list.push(el);
            } else {
              list.push(el.slice(index1 + 1));
            }
          }
        }
      });
      const newList = [...new Set(list)];
      this.getAffectEqu(newList[0]);
    },
    getAffectEqu(name) {
      getGisToken().then(res => {
        if (res.status === 200) {
          const data = res.data;
          if (data.code === 10000 && data.resultValue) {
            const token = data.resultValue.token;
            sessionStorage.setItem("gisMapToken", token);
            this.getSbCount(name);
          }
        }
      });
    },
    getSbCount(name) {
      const obj = {};
      cityArr.forEach(el => {
        if (el.extName === name) {
          obj.type = el.type;
          obj.ssdsid = el.ssdsid;
          obj.unitName = el.ssdsmc || el.extName;
        }
      });
      this.tableInformation.tableData = [
        {
          "unitId": null,
          "unitName": obj.unitName,
          "mainCategoryCode": null,
          "facilityTypeCode": null,
          "zb110kW": 0,
          "xl110kW": 0,
          "xl35kW": 0,
          "xl10kW": 0,
          "tb": 0,
          "yh": 0,
          "tq": 0
        },
        {
          "unitId": null,
          "unitName": "合计",
          "mainCategoryCode": null,
          "facilityTypeCode": null,
          "zb110kW": 0,
          "xl110kW": 0,
          "xl35kW": 0,
          "xl10kW": 0,
          "tb": 0,
          "yh": 0,
          "tq": 0
        }
      ];
      // 110kv主变 32
      this.getSbList(obj, "32", "300000", "zb110kW");
      // 110kv线路
      this.getSbList(obj, "32", "100000", "xl110kW");
      // 35kv线路
      this.getSbList(obj, "25", "100000", "xl35kW");
    },
    getSbList(obj, dydj, typeId, key) {
      const { type, ssdsid } = obj;
      let layerDefs = "";
      if (type === "ds") {
        layerDefs = `dydj=${dydj} and ssds='${ssdsid}'`;
      } else {
        layerDefs = `dydj=${dydj} and yxdw='${ssdsid}'`;
      }
      const params = { typeId, layerDefs };
      getTongyong(params).then(res => {
        if (res.status === 200 && res.data.code === 10000) {
          const data = res.data.resultValue.featureMap[typeId] || {};
          const arr = [];
          if (Object.keys(data).length > 0) {
            for (const key in data) {
              const newobj = {};
              data[key].forEach(el => {
                if (el.fieldName === "sbmc") el.transferredValue = el.codeValue;
                newobj[el.fieldName] = el.transferredValue;
              });
              arr.push(newobj);
            }
          }
          this[key] = arr;
          this.tableInformation.tableData[0][key] = this[key].length;
          this.tableInformation.tableData[1][key] = this[key].length;
          this.tableInformation.tableData[0].unitName = this[key][0].ssds || "";
        }
      });
    },
    changes(val) {
      getIssueJudgeData({ id: val }).then(res => {
        this.list = res;
        const rangeDetailVos = res.rangeDetailVos.map(item => {
          return item.effectRange;
        });
        this.getYjtzdCity(rangeDetailVos[0]);
        this.rangeDetailVos = rangeDetailVos.join(",");
        this.value = res.dangerName;
        this.change(res.dangerCode);
      });
    },
    detailList(row, key) {
      if (row[key] === 0) return;
      this.showDialog(key);
    },
    showMoreDialog() {
      this.sbinfoData = [...this.zb110kW, ...this.xl110kW, ...this.xl35kW];
      this.dialogConfig.isShow = true;
    },
    showDialog(key) {
      this.sbinfoData = this[key] || [];
      this.dialogConfig.isShow = true;
    },
    dialogVisible() {
      this.dialogConfig1.isShow = true;
      this.init();
    },
    close1() { this.dialogConfig1.isShow = false; }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/ComponentStyle.less";

:deep(.leftTopBtn) {
  height: 0px !important;
}

.Emergency {
  height: 95%;
  // padding: 0px 20px;
  margin: 0;

  .homePageCard {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 5px;
  }

  .full-box {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    z-index: 9;
    background-color: #fff;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 5px;

    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }

  :deep(.epgis-popup-content) {
    width: 370px !important;
    height: 130px !important;
    border-radius: 3px !important;
    background-color: #7e8aa6 !important;
    opacity: 0.8;
    // background-image: url("../../../../assets/map/u5.png");
  }

  :deep(.epgis-popup-anchor-top-right .epgis-popup-tip) {
    border-bottom-color: #7e8aa6 !important;
    opacity: 0.8;
  }

  :deep(.el-table__body tr.current-row > td) {
    background-color: transparent !important;
  }

  :deep(.el-input__inner) {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    font-style: normal;
    color: #eeeeee;
  }

  :deep(.el-dialog) {
    height: 80% !important;
    margin-top: 20vh !important;

    .dialog-footer {
      position: absolute;
      width: 20%;
      bottom: 10px;
      left: 40%;
      display: flex;
      justify-content: space-around;
    }
  }

  .Emergency-tb-bt /deep/ .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    // border: none;
  }

  .Emergency-tb-bts /deep/ .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    // border: none;
  }

  .Emergency-tb-bt/deep/ .el-table tr {
    background-color: transparent !important;
    border: 1px solid #397bfa;
  }

  .Emergency-tb-bts/deep/ .el-table tr {
    background-color: transparent !important;
    border: 1px solid #397bfa;
  }

  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  //鼠标悬浮样式
  :deep(tr.hover-row) {

    &,
    &.el-table__row--striped {

      &,
      &.current-row {
        >td.el-table__cell {
          background-color: transparent;
        }
      }
    }
  }

  :deep(div::-webkit-scrollbar) {
    width: 5px;
  }

  :deep(.gutter) {
    background-color: transparent !important;
    border: none !important;
  }

  :deep(.el-table) {
    border: none;
  }

  /deep/ .el-table__fixed::before {
    background: none;
  }

  .Emergency-tb-zzt :deep(.el-table__fixed) {
    position: static !important;
  }

  .Emergency-tb-zzt /deep/ .el-table tr {
    background-color: transparent !important;
    border: none;
  }

  :deep(.el-table) {
    &::before {
      height: 0px;
    }
  }

  .cell {
    color: rgb(255, 255, 255);
  }

  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
    height: 0px;
  }

  :deep(div::-webkit-scrollbar-thumb) {
    border-radius: 10px;
    box-shadow: none;
    background-color: transparent;
  }

  :deep(div::-webkit-scrollbar-track) {
    border-radius: 0;
    background: transparent;
    border: none;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    background-color: transparent;
  }

  .customer-table .el-table__fixed-right::before,
  .el-table__fixed::before {
    width: 0;
  }

  :deep(.el-table__body tr:hover > td) {
    background: none !important;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    .background-row {
      background: rgba(255, 255, 255, 0.2);
    }

    background-color: transparent;

    .el-table__body-wrapper.is-scrolling-left {
      height: 482px;
      padding: 0px !important;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
      background: rgba(255, 255, 255, 0.2);
    }

    .el-table td {
      border-bottom: none;
      color: #fff;
      font-size: 16px;
    }

    .el-table th {
      border-bottom: none;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background-color: transparent;
    }
  }

  :deep(.el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell) {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  :deep(.el-table.bottomTable) {
    font-size: 12px;
    margin-top: 5px;

    div.cell {
      padding-left: 0;
      padding-right: 0;
      font-size: 12px;
    }

    th.el-table__cell {
      background-color: #265cff;
    }
  }

  :deep(.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td) {
    background-color: rgba(255, 255, 255, 0.2);
    /*隔行变色*/
  }

  .half {
    width: 50%;
    display: flex;

    :deep(.el-form-item__content) {
      flex: 1 !important;
    }

    :deep(.el-select) {
      width: 100% !important;
    }

    :deep(.el-input) {
      width: 100% !important;
    }

    :deep(.el-date-editor) {
      width: 100% !important;
    }
  }

  :deep(.el-table__row) {
    font-size: 16px;
  }

  :deep(.has-gutter) {
    font-size: 16px !important;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
  }

  :deep(.el-button) {
    font-size: 16px;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .Emergency-dt {
      width: 50%;
      height: 60%;
      box-sizing: border-box;
      padding: 2px;
      border-radius: 5px;
      border: #3270ff 1px solid;
    }

    .Emergency-tb {
      width: 49%;
      height: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .Emergency-tb-bd {
        width: 100%;
        height: 10%;
        // border: #3270ff 1px solid;

        .flexBetweens {
          align-items: center;
        }

        :deep(.el-form) {
          margin-top: 2px;
        }

        :deep(.el-form-item__label) {
          font-family: PingFang SC;
          font-weight: 400;
          font-style: normal;
          color: #eeeeee;
        }

        :deep(.el-form-item__content) {
          width: 60%;
        }

        :deep(.el-input__inner) {
          background-color: transparent !important;
          border: rgba(10, 73, 187) 1px solid;
          border-radius: 5px;
          color: #fff;
          font-size: 16px !important;
          font-weight: 600 !important;
          box-shadow: 3px 3px 20px 5px #2396cd inset;
        }

        :deep(.el-icon-arrow-up) {
          color: #fff;
          font-size: 16px;
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        height: 34%;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 2px 0 2px 2px;

        .Emergency-tb-bt-top {
          color: #fff !important;
        }

        .Emergency-tb-bt-titel {
          height: 40%;
        }

        .tabs_row_content {
          padding: 5px;
          color: #fff;
          height: 80%;
          overflow: auto;

          .tabs_row_content_tob {
            display: flex;
            justify-content: space-between;
          }

          .sjgy_name {
            display: flex;
            margin-top: 10px;
            line-height: 28px;

            .name {
              // width: 95px;
              // height: 20px;
              width: 80px;
              // background: red;
            }

            .names {
              flex: 1;
            }
          }
        }

        .Emergency-tb-bt-titel {
          width: 100%;
          height: 20%;
          background-color: #3270ff;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .Emergency-tb-bt-top {
            // width: 55%;

            margin-left: 15px;
            font-size: 16px;
            color: #d5f0ff;
            font-family: "MicrosoftYaHeiUI-Bold", "Microsoft YaHei UI Bold", "Microsoft YaHei UI";
            font-weight: 700;
            letter-spacing: 1px;
            // text-indent: 5%;
            // background-color: #eeeeee;
          }

          .Emergency-tb-bt-center {
            // width: 35%;
            margin-right: 15px;
          }

          .Emergency-tb-bt-bottom {
            // width: 6%;
            margin-right: 15px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
          }
        }

        :deep(.el-input__inner) {
          height: 23px;
          line-height: 23px;
          border: rgba(10, 73, 187) 1px solid;
          border-radius: 2px;
          color: #eeeeee;
          background-color: transparent !important;
        }
      }

      .Emergency-tb-bts {
        width: 100%;
        height: 53%;
        border: rgba(10, 73, 187) 1px solid;

        .Emergency-tb-bt-titel {
          height: 13%;
        }

        .Emergency-tb-bt-bottom {
          color: #fff;
        }
      }
    }

    .Emergency-tb-zzt {
      width: 100%;
      height: 37%;
      // background-color: #eeeeee;
      border: rgba(10, 73, 187) 1px solid;

      :deep(.el-input__inner) {
        height: 29px;
        width: 184px;
        line-height: 29px;
        border: rgba(27, 77, 154) 1px solid;
        font-size: 15px;
        border-radius: 2px;
        color: #eeeeee;
        background-color: transparent !important;
      }

      .Emergency-tb-bt-titel {
        background: none;
        width: 100%;
        height: 13%;
      }

      .Emergency-tb-bt-ypbz {
        width: 100%;
        height: 90%;
        display: flex;
        justify-content: space-between;

        .Emergency-tb-bt-ypbzs {
          width: 25%;
          height: 100%;

          .Emergency-tb-bt-ypbzhs {
            width: 100%;
            height: 15%;
            background-color: rgba(31, 85, 228, 0.6);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .Emergency-tb-bt-ypbzcs {
            width: 100%;
            height: 15%;
            background-color: rgba(42, 96, 234, 0.6);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .Emergency-tb-bt-ypbzhss {
            width: 100%;
            height: 15%;
            background-color: rgba(63, 113, 242, 0.6);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .Emergency-tb-bt-ypbzls {
            width: 100%;
            height: 15%;
            background-color: rgba(88, 128, 233, 0.6);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-popover__reference) {
  border: none;
}
</style>
